<template>
  <div>
    <el-dialog title="已推送消息" :visible.sync="dialogTableVisible">
      <el-table :data="bindClassList" border>
        <el-table-column property="class_name" label="班级名称" width="150" align="center" />
        <el-table-column property="main_exam_status" label="考试状态" header-align="center">
          <template slot-scope="{row}">
            <span class="main_exam_status">主考: <span class="main_exam">{{ examTableFormat(row) }}</span></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="{row}">
            <el-tag v-if="row.main_exam_status===1" size="small" @click="delClass(row)">解除绑定</el-tag>
            <span v-else>暂无操作</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime } from '@/filters/filters'
import { bindClass } from '@/api/exam/exam.js'

export default {
  name: 'ExamClass',
  props: {
    bindClassList: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      dialogTableVisible: false// 控制弹框显示隐藏
    }
  },
  // 计算属性处理不同的考试状态和格式化时间
  computed: {
    examTableFormat() {
      return function(row) {
        let str = ''
        let time = null
        const status = row.main_exam_status
        if (status === 1) {
          str = '\u00a0待设置考试时间'
        } else if (status === 2) {
          time = formatTime(row.exam_time_start)
          // console.log(row.exam_time_start, '考试时间')
          // console.log(time, '时间')
          str = '\u00a0待考试' + '\u00a0\u00a0|\u00a0\u00a0' + time
        }
        return str
      }
    }

  },

  methods: {
    // 解除班级绑定
    async delClass(row) {
      console.log(row)
      // class_id,del:true,exam_id===解绑
      await this.$confirm('确定解绑吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await bindClass({
          class_id: row.class_id,
          del: true,
          exam_id: row.exam_id
        })
        console.log(res)

        this.$message({
          type: 'success',
          message: '解绑成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        })
      })
      // 关闭弹框
      this.dialogTableVisible = false
      // 调用父组件的方法刷新列表
      this.$parent.getExamList()
    }

  }
}
</script>

<style>
.main_exam_status{
  color: #66b1ff;
}
.main_exam{
  color: #000;
}
</style>
